<template>
  <div>
    <TopBar></TopBar>
    <SecondBar></SecondBar>
    <div class="mv-container">
      <div class="mv-main">
        <span class="mv-name">{{ MVInfo?.name }}</span>
        <router-link :to="{ path: '/artist', query: { id: MVInfo?.artistId } }">
          <span class="mv-artist">{{ MVInfo?.artistName }}</span>
        </router-link>
        <video class="mv" controls="true" :src="MVUrl?.url" autoplay></video>
      </div>
      <div class="right">
        <div class="mv-info">
          <p class="info-title">MV简介</p>
          <p class="publish-time">发布时间:{{ MVInfo?.publishTime }}</p>
          <p class="playcount">播放次数:{{ MVInfo?.playCount }}</p>
        </div>
        <div class="rel-mv">
          <p class="info-title">相关推荐</p>
          <div class="rel-item" v-for="rel in RelMV" :key="rel.id">
            <div class="mv-pic">
              <img v-lazy="rel.coverUrl" alt="" />
            </div>
            <div class="rel-mv-info">
              <p>{{ rel.title }}</p>
              <p>{{ rel.durationms }}</p>
              <p>by {{ rel.creator.userName }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "MV",
};
</script>

<script lang="ts" setup>
import TopBar from "@/layout/components/TopBar/index.vue";
import SecondBar from "@/layout/components/SecondBar/index.vue";
import { getMVInfoApi, getMVApi, getRelatedMVApi } from "@/api/mv/mv";
import { useRoute } from "vue-router";
import { ref, onMounted } from "vue";
const route = useRoute();
const id = ref<any>(route.query.id);

const MVInfo = ref();
const MVUrl = ref();
const RelMV = ref();

const getMVInfo = async (id: number) => {
  const res = await getMVInfoApi(id);
  MVInfo.value = res.data;
};

const getMVUrl = async (id: number) => {
  const res = await getMVApi(id);
  MVUrl.value = res.data;
};

const getRelatedMV = async (id: number) => {
  const res = await getRelatedMVApi(id);
  RelMV.value = res.data;
};

onMounted(() => {
  getMVInfo(id.value);
  getMVUrl(id.value);
  getRelatedMV(id.value);
});
</script>

<style scoped>
.mv-container {
  width: 900px;
  margin: 0 auto;
  padding: 30px;
  border: 1px solid #d3d3d3;
  display: flex;
}
.right {
  margin-left: 10px;
  padding: 10px;
  border-left: 1px solid #d3d3d3;
}
.mv-info {
  width: 200px;
  margin-bottom: 10px;
}
.publish-time,
.playcount {
  font-size: 13px;
  color: gray;
}
.info-title {
  font-weight: bold;
  border-bottom: 2px solid #d3d3d3;
  margin-bottom: 10px;
  font-size: 14px;
}
.mv-name {
  font-size: 30px;
}
.mv-artist {
  font-size: 14px;
  margin-left: 20px;
}
.mv {
  width: 640px;
  height: 360px;
}
.mv-pic img {
  width: 96px;
  height: 54px;
}
.rel-item {
  display: flex;
  margin-bottom: 15px;
}
.rel-mv-info {
  font-size: 12px;
  margin-left: 5px;
}
.rel-mv-info p {
  width: 100px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>
